<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 200px;
            line-height: 100px;
            border: #c7c6c6 1px solid;
        }
    </style>
    <script>
        $(function (){
            //需求:点击标题li标签，对应的div显示，它的兄弟标签li下面的div不显示
           $('.parentWarp>.menuGroup').click(function (){
               //jQuery特性：隐式迭代
              // jQuery特性：链式编程，在于一个方法返回的是一个jQuery对象,
              // 既然是jQuery对象就可以继续点出jQuery的方法来
              $(this).children('div').show().parent().siblings('li').children('div').hide();
           });
        });
    </script>
</head>
<body>
    <ul class="parentWarp">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>
        <li  class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>
</body>
</html>